<template>
	<view>
		<cu-custom :isBack="true">
			<block #content>设备参数详情</block>
		</cu-custom>
		<view class="margin-xl" style="padding-top:180rpx;color:#010101;font-size:34rpx;">
			<view class="text-df text-bold text-black">
				设备信息
			</view>
			<view class="text-df">
				<view class="padding-tb flex justify-start align-center">
					<view style="width:30%">
						设备名称
					</view>
					<view style="width:60%">
						<view>{{deviceName}}</view>
					</view>
					<view class="cuIcon-edit padding-left text-bold" style="font-size:40rpx;"
						@tap="isShowUpdateModal = true"></view>
				</view>
				<view class="solid-bottom-gradient"></view>
			</view>
			<view class="text-df">
				<view class="padding-tb flex justify-start align-center">
					<view style="width:30%">
						设备编号
					</view>
					<view style="width:70%">
						<view>{{code}}</view>
					</view>
				</view>
				<view class="solid-bottom-gradient"></view>
			</view>
			<view class="text-df">
				<view class="padding-tb flex justify-start align-center">
					<view style="width:30%">
						设备地址
					</view>
					<view style="width:70%" class="address-input">
						<view>{{address}}</view>
					</view>
				</view>
				<view class="solid-bottom-gradient"></view>
			</view>
			<view class="text-df">
				<view class="padding-tb flex justify-start align-center">
					<view style="width:30%">
						信号指数
					</view>
					<view style="width:70%">
						<view>{{signal}}</view>
					</view>
				</view>
				<view class="solid-bottom-gradient"></view>
			</view>
			<!-- 	<view class="text-df">
				<view class="padding-tb flex justify-start align-center">
					<view style="width:30%">
						软件版本号
					</view>
					<view style="width:70%">
					</view>
				</view>
				<view class="solid-bottom-gradient"></view>
			</view>-->
		</view>

		<view class="margin-xl" style="color:#010101;font-size:34rpx;">
			<view class="flex justify-between align-center text-df text-black">
				<view style="width:30%" class="text-bold">数据映射 </view>
				<view style="width:70%"><text class="text-bold">更新时间 : </text><text class="text-gray ">{{inlineTime}}</text></view>
			</view>
			<view v-for="(item,index) in sensorList" :key="index" class="">
				<view class="text-df" @tap="explainData(item)">
					<view class="padding-tb flex justify-start align-center">
						<view style="width:30%">
							{{item.name}}
						</view>
						<view style="width:70%">
							<view class="">
								<text>{{item.flagValue}}</text>
								<text class="margin-left-sm">{{item.unit}}</text>
							</view>
						</view>
					</view>
					<view class="solid-bottom-gradient"></view>
				</view>
			</view>
			<!-- <view class="text-df">
				<view class="padding-tb flex justify-start align-center">
					<view style="width:30%">
						LED状态
					</view>
					<view style="width:70%">
						<input id="userNameInput" @input="changeUserNameInput" :adjustPosition="true" maxlength="300"
							:cursor-spacing="10" value="100%" />
					</view>
				</view>
				<view class="solid-bottom-gradient"></view>
			</view> -->
		</view>

		<view class="cu-modal bottom-modal" :class="[isShowUpdateModal?'show':'']"
			style="text-align: start;z-index:10001;">
			<view class="cu-dialog bg-white">
				<view class="cu-bar bg-white">
					<view class="action text-bold">
						修改设备名
					</view>
					<view class='action text-bold'>
						<view class="cuIcon-close text-grey" @tap="isShowUpdateModal = false"></view>
					</view>
				</view>
				<form>
					<view class="cu-form-group solid-bottom">
						<view class="title">设备名</view>
						<input type="text" v-model="projectName" />
					</view>
					<button class="cu-btn bg-red block margin lg" @tap="confirmUpdate">
						确认
					</button>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		showToast,
		showLoading,
		hideLoading
	} from '@/util/toast'
	import myConfig from '@/myConfig'
	import * as ztIotApi from '@/api/dmIot/ztIotApi.ts'
	export default {
		name: 'deviceParam',
		data() {
			return {
				id: "",
				iconBaseUrl: myConfig.app.iconBaseUrl,
				code: "",
				deviceName: "",
				battery: "",
				signal: "",
				inline: -1,
				inlineTime:"",
				address: "",
				sensorList: [],
				isShowUpdateModal: false,
				projectName: "",
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getInsecticidalLampDevice()
		},
		methods: {
			getInsecticidalLampDevice() {
				let id = this.id
				ztIotApi.getInsecticidalLampDevice({
					id
				}).then((res) => {
					const {
						msg,
						data,
						success
					} = res
					if (success) {
						let {
							id,
							code,
							deviceName,
							battery,
							signal,
							inline,
							inlineTime,
							address,
							sensorList
						} = data
						this.code = code
						this.deviceName = deviceName
						this.projectName = deviceName
						this.battery = battery
						this.signal = signal
						this.inline = inline
						this.inlineTime = inlineTime
						this.address = address
						this.sensorList = sensorList.filter((item) => {
							return item.sensorType === "0"
						})
					}
				})
			},
			confirmUpdate() {
				let id = this.id
				let deviceName = this.projectName
				ztIotApi.updateInsecticidalLampDevice({
					id,
					deviceName
				}).then((res) => {
					const {
						code,
						msg,
						success
					} = res
					if (success) {
						showToast("操作成功", 'none', 1000, false) //操作成功
						this.isShowUpdateModal = false
						this.getInsecticidalLampDevice()
					} else {
						showToast("操作失败", 'none', 1000, false) //操作失败
					}

				})
			},
			explainData(item) {
				uni.navigateTo({
					url: `/pages/explainData/explainData?id=${item.id}&deviceId=${item.deviceId}&name=${item.name}`
				})
			},
			
		}
	}
</script>

<style>
	.box {
		width: 100px;
		height: 100px;
		border: solid 2px transparent;
		border-radius: 5px;
		/* linear-gradient(#ffeff2, #ffeff2), */
		background-image: linear-gradient(to right bottom, #ffeff2 0%, #ffd2d5 50%, #ffeff2 100%);
		background-origin: border-box;
		background-clip: content-box, border-box;
	}

	/* fcf0f3 */
	.solid-bottom-gradient {
		width: 90%;
		margin: 0 5%;
		height: 0.04rem;
		background-image: linear-gradient(to right, #ffffff 0%, #ffd2d5 50%, #ffffff 100%);
	}
</style>
